import { useDispatch, useSelector } from "react-redux"
import { add, sum, async_sum } from '../app/slices/count.js'
// 通过模块化解构语法中的 as 取别名
import { add as likes_add, async_sum as a_sum } from '../app/slices/likes'

export default function Home() {
    const { count, likes } = useSelector(state => state)
    const dispatch = useDispatch();

    return (
        <div>
            <p>
                <span>redux 中的数据是count - {count}</span>
                <br />
                <span>redux 中的数据是likes - {likes}</span>
            </p>
            <div className="btns">
                <button onClick={() => {
                    dispatch(add(2));
                }}>增加</button>

                
                <button onClick={() => {
                    dispatch(function(dispatch) {
                        setTimeout(function() {
                            dispatch(sum(1))
                        }, 2000)
                    })
                }}>减少</button>

                <button onClick={() => {
                    dispatch(async_sum(1))
                }}>异步减少</button>
            </div>
            <div className="btns">
                <button onClick={() => {
                    dispatch(likes_add(2));
                }}>增加点赞</button>

                <button onClick={() => {
                    dispatch(a_sum(1))
                }}>异步减少</button>
            </div>
        </div>
    )
}